<template>
  <div class="modal-component">
    <div class="modal-box">
      <div class="title">{{ title }}</div>
      <div class="content">
        <div class="text">{{ content }}</div>
      </div>
      <div class="btn">
        <div class="box">
          <div class="cancel">{{ cancelText }}</div>
          <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGetUserInfo"></button>
        </div>
        <div class="box">
          <div class="confirm">{{ confirmText }}</div>
          <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGetUserInfo"></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    'title': {
      type: String,
      default: '温馨提示'
    },
    'cancelText': {
      type: String,
      default: '取消'
    },
    'confirmText': {
      type: String,
      default: '确定'
    },
    'content': {
      type: String,
      default: '微信登录需要获取您的用户信息，请前往设置'
    },
  },
  methods: {
    onGetUserInfo (e) {
      this.$emit('onGetUserInfo', e);
    }
  }
}
</script>

<style scoped lang='scss'>

$bgc: #286c53;

.modal-component {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: rgba(0, 0, 0, .6);

  .modal-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
    width: 600rpx;
    background-color: #fff;
    border: 1rpx solid #ddd;
    border-radius: 10rpx;
    overflow: hidden;

    .title {
      text-align: center;
      font-size: 30rpx;
      line-height: 80rpx;
    }

    .content {
      padding: 40rpx;
      font-size: 28rpx;
      color: #666;
      text-align: center;
    }

    .btn {
      border-top: 1rpx solid #ddd;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;

      .box {
        position: relative;
        flex: 1;
        border-radius: 0;
        border: none;
        outline: none;
        background-color: #fff;
        font-size: 30rpx;
        line-height: 80rpx;
        text-align: center;

        .cancel {
          border-right: 1rpx solid #ddd;
          color: #333;
        }

        .confirm {
          color: $bgc;
        }

        button {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
    }
  }
}
</style>
